<template>
	<div class="">
		<div class="">
			<header>
				<div class="sn-flex sn-row-center hidden-sm-and-down">
					<el-input v-model="searchValue" placeholder="输入code进行筛选" style="width: 200px;margin-right: 10px;" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-download"
						@click="exportCodeFn()">
						导出
					</el-button>
				</div>
				<div class="hidden-sm-and-up">
					<el-input v-model="searchValue" placeholder="输入code进行筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
				</div>
			</header>
			<section> 
				<global-table :loading="tableLoading" :showOperate="true" style="margin-top: 20px;" :pageIndex="currentPage" :pageSize="pageSize" :headerData="initData"
					:data="tabelData" :isFullScreen="false" :operateW="100">
					<template #bottleCodes="scope">
						<div  v-if="!scope.row.isShow">
							<span>{{ scope.row.bottleCodes.join(',')}}</span>
						</div>
						<div v-else>
							<p style="margin:0 0 4px" v-for="item in scope.row.bottleCodes" :key="item">{{item}}</p>
						</div>
						<div style="text-align:center;">
						<span style="margin-left:10px;" class="sn-hover" @click="toggleCode(scope.index)">{{scope.row.isShow?'收起':'展开'}}</span>
							
						</div>
					</template>
					<template #operate="scope">
						<el-button type="danger" size="mini" @click="delCodeItemFn(scope.row.id)">删除</el-button>
					</template>
				</global-table>
			</section>
			<footer >
				<el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize"
					layout="prev, pager, next, jumper" :pager-count="7" class="sn-pagination" hide-on-single-page
					style="text-align: center; margin-top: 10px;" :total="totalNum" background>
					>
				</el-pagination>
			</footer>
		</div>
	</div>
</template>
<script>
import GlobalTable from '@/components/GlobalTable';
import {GetBoxCodesPage,DeleteBoxCode,ExportBoxCodesPage} from '@/api/bottleCode';
import { guid } from '@/utils'
export default {
	name:'CodeList',
	components: { GlobalTable },
	data() {
		return {
			tableLoading:false,
			tabelData: [],
			initData: [
				{
					label: '箱码',
					value: 'code',
					id: guid(),
					width:200
				},
				{
					label: '瓶身码',
					value: 'bottleCodes',
					id: guid(),
					width:250,
					isCustom:true,
				},
			],
			currentPage: 1,
			pageSize: 10,
			totalNum: 0,
			searchValue: '',
		}
	},
	props:{
		codeId:{
			type:String,
			default:''
		},
		codeName:{
			type:String,
			default:''
		}
	},
	created() {
		this.getDataListFn();
	},
	methods: {
		async exportCodeFn(){
			try {
				let params = {
					pageIndex: 1,
					pageSize: this.totalNum,
					BoxCodeBachId:this.codeId
				}
				this.tableLoading = true;
				if(this.searchValue!=='') params.CodeStartWith = this.searchValue;
				const res = await ExportBoxCodesPage(params);
				this.tableLoading = false;
				if (res.code!==500) {
					this.$message.success("箱码导出成功，正在下载...");
					let blob = new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
					if ("download" in document.createElement("a")) {
						// 非IE下载
						const elink = document.createElement("a");
						// let fileName= window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8")
						let fileName = `箱码-${this.codeName}`;
						elink.target = "hrefTemplate";
						elink.download = fileName;
						elink.href = URL.createObjectURL(blob);
						elink.click();
						URL.revokeObjectURL(elink.href); // 释放URL 对象
					} else {
						// IE10+下载
						navigator.msSaveBlob(blob, fileName);
					}
				} else {
					this.$message.error('导出箱码失败，错误信息：' + res.erroMessage);
				}
			} catch (error) {
				this.tableLoading = false;
				this.$message.error('导出箱码失败，错误信息：' + error);
			}
		},
		// 箱码展开收起
		toggleCode(index){
			console.log(index);
			this.tabelData[index].isShow = !this.tabelData[index].isShow;
		},
		// 删除商品
		delCodeItemFn(id) {
			this.$confirm('您将要删除该code, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				this.loading = true;
				try {
					let res = await DeleteBoxCode({ Id: id,Thoroughly:true});
					this.loading = false;
					if (res.code === 200) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getDataListFn();
						this.$emit('refreshData')
					} else {
						this.$message.error('删除失败，错误信息：' + res.erroMessage);
					}
				} catch (error) {
					this.loading = false;
					this.erroMessageShow(error);
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		currentChange(val) {
			this.currentPage = val;
			this.getDataListFn();
		},
		async getDataListFn() {
			this.tableLoading = true;
			try {
				let params = {
					BoxCodeBachId:this.codeId,
					pageIndex: this.currentPage,
					pageSize: this.pageSize,
					CodeStartWith: this.searchValue
				}
				const res = await GetBoxCodesPage(params);
				this.tableLoading = false;
				if (res.code === 200) {
					this.tabelData = res.data.list.map(item => {
						item.isShow = false;
						return item;
					});
					this.totalNum = res.data.totalCount;
				} else {
					this.tabelData = [];
					this.$message.error('获取商品列表失败，错误信息：' + res.erroMessage);
				}
			} catch (error) {
				this.tableLoading = false;
				this.$message.error('请求商品列表失败，错误信息：' + error);
			}
			
		},
	}
};
</script>
  
<style lang="scss" scoped>
.prcoss-container {
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
}</style>